<!doctype html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/common.css">
  <link rel="stylesheet" type="text/css" href="css/bulk-save.css">
  <link rel="icon" type="image/png" href="images/toolbar/toolbar-icon-archive32.png">
  <title>Bulk Save URLs</title>
</head>
<body>
  <div class="body-container">

    <div class="header-container">
      <img src="images/app-icon/app-icon128.png" alt="Internet Archive icon" class="ia-logo">
      <h2 id="main-title">Bulk Save</h2>
      <p id="main-info"></p>
      <p id="error-msg" class="error-color"></p>
      <p id="empty-list-err" class="error-color">Looks like you haven't added any URLs. Please add some URLs and try again.</p>
      <p id="not-logged-in" class="error-color">Looks like you aren't logged in. Please log in and try again.</p>
    </div>

    <div class="outer-container">

      <div id="add-container">
        <textarea id="add-url-area" class="container-scrollbar form-control" placeholder="Enter URLs..." autofocus></textarea>
        <div class="btn-flex-block">
          <button class="btn btn-auto btn-dark-gray" id="add-url-btn">Add URLs</button>
          <button class="btn btn-auto btn-dark-gray" id="import-bookmarks-btn">Import All Bookmarks</button>
          <button class="btn btn-auto btn-dark-gray" id="clear-all-btn">Clear All</button>
          <p id="limit-count-info"></p>
        </div>
      </div>

      <div id="list-container" class="container-scrollbar"></div>

      <div id="list-toolbar" class="btn-flex-block">
        <button class="btn btn-auto btn-dark-gray" id="copy-all-btn">Copy All Links</button>
        <button class="btn btn-auto btn-dark-gray" id="copy-saved-btn">Copy Saved</button>
        <button class="btn btn-auto btn-dark-gray" id="copy-unsaved-btn">Copy Unsaved</button>
        <div id="count-container">
          <div><span>Saved</span>:&nbsp;<b id="saved-count" class="highlight-color">0</b></div>
          <div><span>Failed</span>:&nbsp;<b id="failed-count" class="highlight-color">0</b></div>
          <div><span>Total</span>:&nbsp;<b id="total-count" class="highlight-color">0</b></div>
        </div>
      </div>

      <div id="save-options-container">
        <p>
          <input type="checkbox" id="saved-within-chk">
          <label class="save-options" for="saved-within-chk">Save only URLs that have not been archived within the last:</label>
          <select id="saved-within-opt">
            <option value="1d">24 hours</option>
            <option value="7d">7 days</option>
            <option value="30d">30 days</option>
            <option value="90d">90 days</option>
            <option value="365d">Year</option>
            <option value="99999d" selected>Ever (default)</option>
          </select>
        </p>
        <p>
          <input type="checkbox" id="chk-screenshot">
          <label class="save-options" for="chk-screenshot" id="chk-screenshot-label">Save Screenshots.</label>
          <!--
          <input type="checkbox" id="chk-outlinks">
          <label class="save-options" for="chk-outlinks" id="chk-outlinks-label">Save Outlinks. (slow)</label>
          -->
        </p>
      </div>

    </div>

    <div id="legend-container">
      <table>
        <tr>
          <td><div class="legend-row"><div class="status-btn">x</div><div class="legend-item">Not Saved</div></div></td>
          <td><div class="legend-row"><div class="status-btn status-saving"> </div><div class="legend-item">Saving</div></div></td>
          <td><div class="legend-row"><div class="status-btn status-done">✔</div><div class="legend-item">Saved</div></div></td>
        </tr>
        <tr>
          <td><div class="legend-row"><div class="status-btn status-failed">!</div><div class="legend-item">Failed</div></div></td>
          <td><div class="legend-row"><div class="status-btn status-reset"> </div><div class="legend-item">Retry</div></div></td>
          <td><div class="legend-row"><div class="status-btn status-done">•</div><div class="legend-item">Skipped</div></div></td>
        </tr>
      </table>
    </div>

    <div id="save-container">
      <button class="btn btn-auto btn-red progress-container" id="bulk-save-btn">
        <div class="progress" id="save-progress-bar">
          <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%"></div>
        </div>
        <div id="bulk-save-label">Start Bulk Save</div>
      </button>
      <button class="btn btn-auto btn-dark-gray" id="pause-btn">Pause</button>
    </div>

  </div>
  <script src="scripts/utils.js"></script>
  <script src="scripts/build.js"></script>
  <script src="scripts/bulk-save.js"></script>
</body>
</html>
